<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css">
    <style>
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <form action="http://huanqiu.com" method="post" name="login" id="login" onsubmit="return checkform()">
        <div>
            <a href="">+86</a>
            <a href="">▼</a>
            <div class="you">
                <input type="text" name="phone" id="phone" class="input" placeholder="输入手机号">
            </div>
        </div>
        <p class="error">手机号错误</p>
        <div>
            <input type="submit" value="获取验证码" id="sub">
            <a href="">密码登录</a>
        </div>
    </form>
    <script>
/* 验证手机号 */
var phone=document.getElementById("phone");
var error=document.getElementsByClassName("error");

phone.onchange=checkphone;
function checkphone(){
    if(phone.value.length == 11){
        error[0].style.display="none";
        return 1;
    }
    else{
        error[0].style.display="block";
        return 0;
    }
}
function checkform(){
    var rs=checkphone();
    if(rs == 0){
        return false;
    }
    else{
        return true;
    }
}
    </script>
</body>
</html>